<template>
  <div>
    <div class="overlay">
      <div class="overlay-content scrolling">
        <div>
          <van-nav-bar title="导入钱包" @click-left="onClickLeft" :border="false">
            <van-icon name="arrow-left" slot="left" color="#676767" />
          </van-nav-bar>
          <div class="row-justify-content">
            <van-tabs
              line-width="112px"
              v-model="active"
              color="#22a0ff"
              title-active-color="#22a0ff"
              :border="false"
            >
              <!-- 助记词 -->
              <van-tab title="助记词">
                <div>
                  <van-field
                    v-model="mneWord"
                    placeholder="助记词 按空格分隔"
                    type="textarea"
                    autosize
                    class="text"
                    @input="inputOne"
                  />
                </div>
                <div>
                  <van-cell-group :border="false" class="tab1">
                    <van-field v-model="words" maxlength="12" :border="false" class="arrows">
                      <van-icon name="arrow" slot="right-icon" color="#b8c2cb" />
                    </van-field>
                    <div class="pass">
                      <van-field
                        :border="false"
                        v-model="mnePassword"
                        placeholder="密码"
                        @blur="checkblur(1)"
                        @input="inputOne"
                      />
                      <div class="pass_tip" style="color:red;">{{tipMessage}}</div>
                      <div class="strength row-space-between">
                        <span style="color:red;">{{strength}}</span>
                        <ul class="row-space-between flex-column">
                          <li v-for="item in 4" :key="item"></li>
                        </ul>
                      </div>
                    </div>
                    <van-field
                      :border="false"
                      v-model="mnePassword2"
                      placeholder="重复密码"
                      @blur="checkblur(2)"
                      @input="inputOne"
                    />
                    <van-field :border="false" v-model="tips" placeholder="密码提示信息（可不填）" />
                  </van-cell-group>
                </div>
                <div class="row-justify-content">
                  <div class="sure">
                    <div class="tips">
                      <img
                        v-if="checkImg"
                        src="../../../assets/images/checked.png"
                        @click="choose(1)"
                      />
                      <img v-else src="../../../assets/images/check.png" @click="choose(1)" /> 我已仔细阅读并同意
                      <span>服务及隐私条款</span>
                    </div>
                    <button
                      :class="mnemonic?'active':''"
                      :disabled="!mnemonic"
                      @click="importMnemon"
                    >开始导入</button>
                  </div>
                </div>
                <router-link class="mnemonicWord row-column-center" to="/mnemonicWord">什么是助记词？</router-link>
              </van-tab>
              <!-- keystore -->
              <van-tab title="keystore" class="keystore">
                <p>直接复制粘贴以太坊官方钱包 Keystore 文件内容至输入框。或者通过生成 Keystore 内容的二维码，扫描录入。</p>
                <div>
                  <van-field
                    v-model="keystoneValue"
                    placeholder="keystore文本内容"
                    type="textarea"
                    autosize
                    class="text keytext"
                    @input="inputTwo"
                  />
                </div>
                <div>
                  <van-cell-group class="tab2" :border="false">
                    <van-field
                      style="  padding: 0 6px 3px 6px;border-bottom: 1px solid #ebedf0; "
                      v-model="keystonePassword"
                      type="password"
                      placeholder="keystore密码"
                      @blur="checkblur3"
                      @input="inputTwo"
                    />
                  </van-cell-group>
                </div>
                <div class="row-justify-content">
                  <div class="sure">
                    <div class="tips">
                      <img
                        v-if="checkImg2"
                        src="../../../assets/images/checked.png"
                        @click="choose(2)"
                      />
                      <img v-else src="../../../assets/images/check.png" @click="choose(2)" /> 我已仔细阅读并同意
                      <span>服务及隐私条款</span>
                    </div>
                    <button
                      :class="keystoneBtn?'active':''"
                      :disabled="!keystoneBtn"
                      @click="importKeystore"
                    >开始导入</button>
                  </div>
                </div>
                <router-link class="mnemonicWord row-column-center" to="/mnemonicWord">什么是keystore？</router-link>
              </van-tab>
              <!-- 私钥 -->
              <van-tab title="私钥">
                <div>
                  <van-field
                    v-model="prikey"
                    placeholder="明文私钥"
                    type="textarea"
                    autosize
                    class="text"
                    @input="inputSix"
                  />
                </div>
                <div>
                  <van-cell-group :border="false" class="tab1">
                    <van-field
                      v-model="keyPassword"
                      placeholder="密码"
                      @blur="checkblur2(1)"
                      :border="false"
                      @input="inputSev"
                    />
                    <van-field
                      :border="false"
                      v-model="keyPassword2"
                      placeholder="重复密码"
                      @blur="checkblur2(2)"
                      @input="inputEight"
                    />
                    <van-field :border="false" v-model="tips" placeholder="密码提示信息（可不填）" />
                  </van-cell-group>
                </div>
                <div class="row-justify-content">
                  <div class="sure">
                    <div class="tips">
                      <img
                        v-if="checkImg3"
                        src="../../../assets/images/checked.png"
                        @click="choose(3)"
                      />
                      <img v-else src="../../../assets/images/check.png" @click="choose(3)" /> 我已仔细阅读并同意
                      <span>服务及隐私条款</span>
                    </div>
                    <button :class="keyBtn?'active':''" :disabled="!keyBtn" @click="importKey">开始导入</button>
                  </div>
                </div>
                <router-link class="mnemonicWord row-column-center" to="/MnemonicWord">什么是私钥？</router-link>
              </van-tab>
            </van-tabs>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { base } from "../../../utils/api";
export default {
  data() {
    return {
      mneWord: "", //助记词
      words: "123/234234/2",
      checkImg: false,
      checkImg2: false,
      checkImg3: false,
      mnePassword: "", //助记词密码
      mnePassword2: "",
      keystoneValue: "",
      keystonePassword: "", //keystone密码
      keyPassword: "", //私钥密码
      keyPassword2: "",
      prikey: "", //私钥
      tips: "",
      mnemonic: false,
      keystoneBtn: false,
      keyBtn: false
    };
  },
  watch: {},
  computed: {},
  methods: {
    inputThree() {
      if (
        this.prikey != "" &&
        this.keyPassword != "" &&
        this.keyPassword2 != "" &&
        this.checkImg3
      ) {
        this.keyBtn = true;
        return true;
      } else {
        this.keyBtn = false;
        return false;
      }
    },
    inputTwo() {
      if (
        this.keystoneValue != "" &&
        this.keystonePassword != "" &&
        this.checkImg2
      ) {
        this.keystoneBtn = true;
        return true;
      } else {
        this.keystoneBtn = false;
        return false;
      }
    },
    inputOne() {
      if (
        this.mneWord != "" &&
        this.mnePassword != "" &&
        this.mnePassword2 != "" &&
        this.checkImg
      ) {
        this.mnemonic = true;
        return true;
      } else {
        this.mnemonic = false;
        return false;
      }
    },
    importMnemon() {
      let mnepass = this.mnePassword.toString();
      if (mnepass.length < 8) {
        this.$toast("请输入不少于8位字符的密码");
        return false;
      }
      this.$toast.loading({
        message: "正在导入中...",
        forbidClick: true,
        duration: 0
      });
      base
        .importMnemonic({
          type: "ETH_NODE",
          password: this.mnePassword,
          confirmPassword: this.mnePassword2,
          path: "m/44'/60'/0'/0",
          mnemonic: this.mneWord
        })
        .then(res => {
          if (res.code == 200) {
            this.$toast.loading({
              message: "导入成功",
              forbidClick: true,
              duration: 5000
            });
            this.$toast.clear();
          } else {
            this.$toast(res.msg);
          }
        });
    },
    importKeystore() {
      let pass = this.keystonePassword.toString();
      if (pass.length < 8) {
        this.$toast("请输入不少于8位字符的密码");
        return false;
      }
      this.$toast.loading({
        message: "正在导入中...",
        forbidClick: true,
        duration: 0
      });
      base
        .importKeystore({
          type: "ETH_NODE",
          password: this.keystonePassword,
          path: "m/44'/60'/0'/0",
          keystore: this.keystoneValue
        })
        .then(res => {
          if (res.code == 200) {
            this.$toast.loading({
              message: "导入成功",
              forbidClick: true,
              duration: 5000
            });
            this.$toast.clear();
          } else {
            this.$toast(res.msg);
          }
        });
    },
    importKey() {
      let pass = this.keyPassword.toString();
      if (pass.length < 8) {
        this.$toast("请输入不少于8位字符的密码");
        return false;
      }
      this.$toast.loading({
        message: "正在导入中...",
        forbidClick: true,
        duration: 5000
      });
      base
        .importKey({
          type: "ETH_NODE",
          password: this.keyPassword,
          confirmPassword: this.keyPassword2,
          path: "m/44'/60'/0'/0",
          privateKey: this.prikey
        })
        .then(res => {
          if (res.code == 200) {
            this.$toast.loading({
              message: "导入成功",
              forbidClick: true,
              duration: 0
            });
            this.$toast.clear();
          } else {
            this.$toast(res.msg);
          }
        });
    },
    choose(index) {
      if (index == 1) {
        this.checkImg = !this.checkImg;
        this.inputOne();
      } else if (index == 2) {
        this.checkImg2 = !this.checkImg2;
        this.inputTwo();
      }
      if (index == 3) {
        this.checkImg3 = !this.checkImg3;
        this.inputThree();
      }
    },

    // 验证钱包密码
    checkblur(index) {
      if (index == 1) {
        if (this.mnePassword.length < 8) {
          this.$dialog.alert({
            message: "请输入不少于8位字符的钱包密码",
            confirmButtonText: "好的"
          });
          return false;
        }
      } else {
        if (this.mnePassword != this.mnePassword2) {
          this.$dialog.alert({
            message: "密码不一致，请重新输入",
            confirmButtonText: "好的"
          });
          return false;
        }
      }
    },
    // 验证私钥密码
    checkblur2(index) {
      if (index == 1) {
        if (this.keyPassword.length < 8) {
          this.$dialog.alert({
            message: "请输入不少于8位字符的私钥密码",
            confirmButtonText: "好的"
          });
        }
      } else {
        if (this.keyPassword != this.keyPassword2) {
          this.$dialog.alert({
            message: "密码不一致，请重新输入",
            confirmButtonText: "好的"
          });
        }
      }
    },
    // 验证keystone密码
    checkblur3() {
      if (this.keystonePassword.length < 8) {
        this.$dialog.alert({
          message: "请输入不少于8位字符的keystone密码",
          confirmButtonText: "好的"
        });
      }
    },
    onClickLeft() {
      this.$router.go(-1);
    }
  }
};
</script>
<style lang="less" scoped>
/deep/.van-tabs__wrap {
  border-bottom: 0.5px solid #ebedf0 !important;
}
.van-tab__pane {
  padding-top: 28px;
  box-sizing: border-box;
}

.text {
  width: 335px;
  height: 100px;
  border: 1px solid #b8c2cb;
}

.arrows {
  position: relative;
}

.sure {
  margin-top: 18px;
  width: 340px;
  .tips {
    padding-left: 3px;
    color: #b8c2cb;
    font-size: 12px;
    img {
      width: 18px;
      height: 18px;
      vertical-align: -4px;
      margin-right: 5px;
    }
    span {
      color: #22a0ff;
    }
  }
  button {
    width: 100%;
    height: 40px;
    border: none;
    color: #fff;
    background: #ccc;
    font-size: 12px;
    margin-top: 15px;
    border-radius: 5px;
  }
  .active {
    background: #108ce9;
  }
}

.mnemonicWord {
  height: 80px;
  font-size: 12px;
  color: #22a0ff;
}

.keystore {
  width: 340px;
  p {
    color: #999999;
    font-size: 12px;
  }
  .keytext {
    margin: 20px 0;
  }
}

.tab1 .van-cell {
  border-bottom: 1px solid #ebedf0;
  padding: 25px 5px 3px 5px;
}
</style>